<template>
    <Access :title="title" :subtitle="subtitle" :showTime="showTime">
        <div style="padding-top:36px" v-if="showCp==1">
            <code-input v-model="code" placeholder="请输入预约码取件" @confirm="inputConfrim"/>
        </div>
        <div style="padding-top:65px" v-else-if="showCp==2">
            <code-error @done="operate"/>
        </div>
        <div style="padding-top:42px" v-else-if="showCp==3">
            <open-door @done="operate" type="2"/>
        </div>  
    </Access>
</template>

<script>
import { reactive ,toRefs,inject,computed} from 'vue'
import {useStore} from 'vuex'
import Access from '@/components/access.vue'
import codeInput from '../codeInput.vue'
import codeError from '../codeError.vue'
import openDoor from '../openDoor.vue'
export default {
    components:{
       Access,
       codeInput,
       codeError,
       openDoor
    },
    setup() {
        const store = useStore()
        
        const state = reactive({
            carCode: computed(()=>store.state.carCode),
            title:'取件码取件',
            subtitle:'', // 副标题
            code:'',
            showCp:1,
            showTime:'',
            retry:false //再次开门，首次开门传false 再次开门传true
        })

        const close = inject('close')  // 关闭弹窗方法

        const inputConfrim = async ()=>{
            if(!state.code){
               return alert("请输入取件码")
            }
            const res = await store.dispatch('out_open_door',{
                carCode:state.carCode,
                keyCode:state.code,
                retry:state.retry  
            })
            //res.success = true
            if(res.success){
                state.title="柜门已打开"
                state.subtitle = `${res.data}号门已开`
                state.showCp=3
                state.showTime = 60
            }else{
                state.title= res.message ||"取件码错误"
                state.showCp=2
            }
            //close()
        }

        const operate = flag=>{
            if(flag==1){  // 继续取件
                state.title = '取件码取件'
                state.subtitle = ''
                state.showCp=1
                state.showTime = ''
                state.retry = true
            }
        }

        return {
            ...toRefs(state),
            inputConfrim,
            operate
        }
    },
}
</script>